/*
 * Copy Right: Tencent ISUX
 * Project: QAM（Qzone模块化页面搭建平台）
 * Description: 页面创建与配置
 * Author: Tysonpan
 * date: 2011-12-05
 */

/* 页面的相关操作 */
var page = {

    page_id:functions.getRequest('page_id'), //当前配置页面的id
    frame_id:functions.getRequest('frame_id'), //基于框架创建的页面，frame_id为框架id
    page_type:functions.getRequest('page_type'), //标记页面类型，值为空是普通页面，1为临时页面，2为由框架创建的页面
    page_ident:null, //当前配置页面的唯一标识符
    css_list:[], //当前配置页面使用的外链css列表
    code_list:[], //代码片段列表（每项含代码类型，类型前缀，以及代码内容）
    times:null, //当前页面已经被拖放元素的次数（用作生成新拖放元素的唯一标识符）
    layout_id:null, //当前选择的布局id
    code_content:null, //当前被添加到页面中的代码块
    drag_element:null, //当前正在被拖拽的目标元素
    select_element:null, //当前选中的元素
    dom_element:[], //保存当前DOM树中节点所指向元素的引用
    save_interval_time:60000, //定时自动保存页面，间隔为一分钟
    ctrl_key:false, //CTRL键的状态，按下为true，松开为false
    alt_key:false, //ALT键的状态，按下为true，松开为false
    shift_key:false, //SHIFT键的状态，按下为true，松开为false
    temp_page_content:'', //存放上一次保存的页面内容，用来在保存页面时对比，发现内容有改变才执行保存

    /*
     * 初始化
     */
    init:function () {
        this.getPageContent();
        this.getProjectList();
        this.getLayoutList();
        this.getCodeList('2');

        this.setSideBarHeight();
        this.setAddLayout();
        this.setSelectLayoutNext();
        this.setSelectLayoutLast();
        this.setSwitchProject();
        this.setSwitchCodeType();
        this.setSwitchTagContainer();
        this.setMouseInspectElement();
        this.setDomInspectElement();
        this.setDrag();
        this.setDrop();
        this.setDomActions();
        this.setInlineStyle();
        this.setStructure();
        this.setGlobalStyle();
        this.setCommonEffect();
        this.setPickParam();
        this.setPlaceholderSize();
        this.setPreviewAndSave();
        this.setKeyEvent();
        this.setKeyListShow();
        this.setCssList();
        this.setRecycleBin();
        this.setAuxiliaryEffect();
        this.setPopupMove();
    },

    /*
     * 拉取页面原始内容
     */
    getPageContent:function () {
        var data_area;
        var data_str;

        //对已有页面进行编辑
        if (page.page_id != '') {
            data_area = [];
            data_area.push([ "id" , page.page_id ]);
            data_str = functions.requestToString(data_area);
            $.ajax({
                url:cgipath + 'page-read', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                    message.show('message_div', '提示', '请求失败', 4);
                },
                success:this.handleGetPageContent
            });
        }
        //基于框架创建页面
        else if (page.frame_id != '') {
            data_area = [];
            data_area.push([ "frame_id" , page.frame_id ]);
            data_str = functions.requestToString(data_area);
            $.ajax({
                url:cgipath + 'page-addFromFrame', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                    message.show('message_div', '提示', '请求失败', 4);
                },
                success:function (feedback) {
                    if (feedback.ret == '0') {
                        window.location.href = '?page_id=' + feedback.page_id + '&page_type=2';
                    }
                    else {
                        message.show('message_div', '提示', feedback.msg, 5);
                    }
                }
            });
        }
        //快速创建页面
        else {
            $.ajax({
                url:cgipath + 'page-addImmediate', type:'POST', dataType:'json', timeout:ajax_timeout, error:function () {
                    message.show('message_div', '提示', '请求失败', 4);
                },
                success:function (feedback) {
                    if (feedback.ret == '0') {
                        window.location.href = '?page_id=' + feedback.page_id + '&page_type=1';
                    }
                    else {
                        message.show('message_div', '提示', feedback.msg, 5);
                    }
                }
            });
        }
    },

    handleGetPageContent:function (feedback) {
        if (feedback.ret = '0') {
            page.page_ident = feedback.ident;
            page.times = feedback.times;
            var page_content = feedback.content;
            var css_list = feedback.css;
            //加入这个页面所使用的外链样式，并在样式管理面板显示出来
            //根项目
            var root_css_list = css_list.root_project_list.css_list;
            if (root_css_list.length > 0) {
                var root_css_str = '<ul><h5>' + css_list.root_project_list.name + '</h5>';
                for (var i = 0; i < root_css_list.length; i++) {
                    if (root_css_list[i].used_flag == 1) {
                        root_css_str += '<li><span>' + root_css_list[i].name + '</span><input type="checkbox" value="1" css_id="' + root_css_list[i].id + '" css_path="' + root_css_list[i].path + '" checked="checked"></li>';
                        //往页面中加入此外链样式
                        $('#custom_canvas_area').append('<link type="text/css" href="' + root_css_list[i].path + '" rel="stylesheet" media="screen"/>');
                        //记录此样式id
                        page.css_list.push(root_css_list[i].id + '');
                    }
                    else {
                        root_css_str += '<li><span>' + root_css_list[i].name + '</span><input type="checkbox" value="1" css_id="' + root_css_list[i].id + '" css_path="' + root_css_list[i].path + '" ></li>';

                    }

                }
                root_css_str += '</ul>';
                $('#dropdown_css_list').append(root_css_str);
            }
            //子项目
            var child_css_list = css_list.child_project_list.css_list;
            if (child_css_list.length > 0) {
                var child_css_str = '<ul><h5>' + css_list.child_project_list.name + '</h5>';
                for (var j = 0; j < child_css_list.length; j++) {
                    if (child_css_list[j].used_flag == 1) {
                        child_css_str += '<li><span>' + child_css_list[j].name + '</span><input type="checkbox" value="1" css_id="' + child_css_list[j].id + '" css_path="' + child_css_list[j].path + '" checked="checked"></li>';
                        //往页面中加入此外链样式
                        $('#custom_canvas_area').append('<link type="text/css" href="' + child_css_list[j].path + '" rel="stylesheet" media="screen"/>');
                        //记录此样式id
                        page.css_list.push(child_css_list[j].id + '');
                    }
                    else {
                        child_css_str += '<li><span>' + child_css_list[j].name + '</span><input type="checkbox" value="1" css_id="' + child_css_list[j].id + '" css_path="' + child_css_list[j].path + '" ></li>';

                    }
                }
                child_css_str += '</ul>';
                $('#dropdown_css_list').append(child_css_str);
            }
            if (root_css_list.length == 0 && child_css_list.length == 0) $('#dropdown_css_list').append('<p>此页面暂无可用的公用样式</p>');

            //加入页面内容
            $('#custom_canvas_area').append(page_content);
            //如果页面无内容，默认显示添加布局的弹框
            if ($('.page_' + page.page_ident).children().length == 0) $('#qam_popup_layout').fadeIn();
            //初始状态加入历史记录
            history.addHistoryRecord();
            //禁止图片拖拽
            page.banImgDrag();
            //绑定自由拖动元素的拖动事件
            page.setAbsolutelMove();
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }
    },

    /*
     * 拉取布局列表
     */
    getLayoutList:function () {
        var data_area = [];
        data_area.push([ "type" , 0 ]);
        data_area.push([ "order" , "id" ]);
        data_area.push([ "desc" , 1 ]);
        var data_str = functions.requestToString(data_area);
        $.ajax({
            url:cgipath + 'code-showlist', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:this.handleGetLayoutList
        });
    },

    /*
     * 显示布局列表
     */
    handleGetLayoutList:function (feedback) {
        if (feedback.ret == '0') {
            var listData = feedback.listdata;
            var $listDataArea = $('#layout_list');
            for (var i = 0; i < listData.length; i++) {
                var eLayout = '<li><a title="' + listData[i].name + '" layout_id="' + listData[i].id + '"><img src="' + cgipath + listData[i].path_thumb + '" alt="' + listData[i].name + '"/></a><span>' + listData[i].name + '</span></li>';
                $listDataArea.append(eLayout);
            }

            page.setSelectLayoutHover();
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }
    },

    /*
     * 拉取代码列表
     * @param code_type :  代码类别，0为布局，1为容器，2为模块，3为组件
     * @param project_id : 项目id，根据项目类别筛选代码列表
     */
    getCodeList:function (code_type, project_id) {
        var data_area = [];
        data_area.push([ "type" , code_type ]);
        data_area.push([ "code_flag" , 1 ]);
        data_area.push([ "order" , "id" ]);
        data_area.push([ "desc" , 1 ]);
        if (project_id != undefined) {
            data_area.push([ "search_flag" , 0 ]);
            data_area.push([ "project_id" , project_id ]);
        }
        var data_str = functions.requestToString(data_area);

        $.ajax({
            url:cgipath + 'code-showlist', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:this.handleGetCodeList
        });
    },

    /*
     * 显示代码列表
     */
    handleGetCodeList:function (feedback) {
        if (feedback.ret == '0') {

            //获取代码数据
            var listData = feedback.listdata;
            var code_list_str = '';
            for (var i = 0; i < listData.length; i++) {
                //新方式，代码块存到一个数组变量中，防止这些代码写入页面影响其他地方
                page.code_list[listData[i].id] = {"code_type":listData[i].type, "prefix":listData[i].prefix, code:listData[i].code};

                var eCode = '';
                eCode += '<li>';
                eCode += '<div class="img_wrap" draggable="true">';
                eCode += '<a style="background-image:url(' + cgipath + listData[i].path_thumb + ')"></a>';
                eCode += '<span class="module_name">' + listData[i].name + '</span>';
                //各种标记，代码块放在一个隐藏的容器中（旧方式）
                //eCode += '<code class="code_container" id="code_container" code_id="' + listData[i].id + '" code_type="' + listData[i].type + '" prefix="' + listData[i].prefix + '">' + listData[i].code + '</code>';
                //新方式，只保留code_id，用来作为下标取数据
                eCode += '<code class="code_container" id="code_container" code_id="' + listData[i].id + '"></code>';
                eCode += '</div>';
                eCode += '<div class="img_op">';
                eCode += '<div class="img_op_inner">';
                eCode += '<a><i class="qam_ico qam_ico_append" title="追加到当前节点里面" action="append"></i></a>';
                eCode += '<a><i class="qam_ico qam_ico_insert_after" title="添加到当前节点的后面" action="insertAfter"></i></a>';
                eCode += '</div>';
                eCode += '</div>';
                eCode += '</li>';

                code_list_str += eCode;
            }

            //取消显示等待
            $('.qam_custom_side_list').removeClass('loading');

            //显示代码列表
            $('#side_list').empty().append(code_list_str);
            //绑定hover事件，提供操作入口，后来用样式实现了
            /*$('#side_list>li').hover(function () {
             $(this).addClass('current');
             }, function () {
             $(this).removeClass('current');
             });*/
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }
    },

    /*
     * 获取某块代码的配置参数，目前只有布局可配置
     * @param code_id : 代码片段的id
     */
    getCodeParam:function (code_id) {
        //显示等待
        notify.show(1, "正在处理，请稍候");

        var data_area = [];
        data_area.push([ "code_id" , code_id ]);
        var data_str = functions.requestToString(data_area);
        $.ajax({
            url:cgipath + 'pick-parm', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:this.handleGetCodeParam
        });
    },

    handleGetCodeParam:function (feedback) {
        if (feedback.ret == '0') {
            var listData = feedback.listdata;
            var param_str = '';
            //如果布局没有配置参数，直接跳第三步
            if (listData == '') {
                $('#no_param_layout_last').attr('step_id', '1');          //没有参数，自然返回上一步也是直接返回到第一步的

                page.times++;
                var ident = 'wp_' + page.times;      //布局的前缀目前是wp_
                page.getCodeView(page.layout_id, ident, [], '1');

                return;
            }

            //布局有配置参数
            for (var i = 0; i < listData.length; i++) {        //遍历组
                $('#no_param_layout_last').attr('step_id', '2');          //重置返回上一步到第二步

                var group_str = '';
                var group_list = '';

                var dependent_flag = (listData[i].group_dependent != '0');   //控制该组参数是否有效的开关，0为没有开关，非0则为有开关，开关是第一个子元素
                //有开关
                if (dependent_flag) {
                    //获取开关
                    var switcher = listData[i].group_list[0];

                    //本组参数只有开关，单独显示
                    if (listData[i].group_list.length == 1) {
                        group_str += '<div class="panel">';
                        group_str += '<span class="panel_tit"><label for="pick_' + switcher.id + '"><input type="checkbox" checked="checked" id="pick_' + switcher.id + '"/>' + switcher.name + '</label>：</span>';
                        group_str += '<div class="panel_main">';
                        group_str += '<span>' + switcher.info + '</span>';
                        group_str += '</div>';
                        group_str += '</div>';
                    }
                    //正常显示，用fieldset
                    else {
                        //构造表单
                        group_str += '<fieldset class="select">';
                        group_str += '<legend><label for="pick_' + switcher.id + '"><input type="checkbox" checked="checked" id="pick_' + switcher.id + '"/>' + switcher.name + '</label></legend>';
                        //遍历其他参数
                        group_list = listData[i].group_list;
                        for (var j = 1; j < group_list.length; j++) {
                            group_str += '<div class="panel">';
                            group_str += '<span class="panel_tit">' + group_list[j].name + '：</span>';
                            group_str += '<div class="panel_main">';
                            group_str += '<input type="text" id="pick_' + group_list[j].id + '" class="inputstyle_pop" value="' + group_list[j].value + '" pick_type="' + group_list[j].pick_value_type + '" />';
                            if (group_list[j].pick_value_type == '1') {     //是颜色参数
                                group_str += '<span class="background" style="background-color:' + group_list[j].value + '"></span>';
                            }
                            group_str += '</div>';
                            group_str += '</div>';
                        }
                        group_str += '</fieldset>';
                    }
                }
                //无开关
                else {
                    //遍历所有参数
                    group_list = listData[i].group_list;
                    for (var j = 0; j < group_list.length; j++) {
                        group_str += '<div class="panel">';
                        group_str += '<span class="panel_tit">' + group_list[j].name + '：</span>';
                        group_str += '<div class="panel_main">';
                        group_str += '<input type="text" id="pick_' + group_list[j].id + '" class="inputstyle_pop" value="' + group_list[j].value + '" pick_type="' + group_list[j].pick_value_type + '" />';
                        if (group_list[j].pick_value_type == '1') {     //是颜色参数
                            group_str += '<span class="background" style="background-color:' + group_list[j].value + '"></span>';
                        }
                        group_str += '</div>';
                        group_str += '</div>';
                    }
                }

                param_str += group_str;

            }

            //把拼装好的表单显示出来
            $('#param_form').empty().append(param_str);
            page.setColorParam();
            page.setSwitcherParam();

            //切换显示第二个步骤
            $('#layout_step1').hide();
            $('#layout_step2').show();

        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }

        notify.close();
    },

    /*
     * 获取某个已配置过的代码片段的配置参数
     * @param ident : 代码片段在此页面的唯一标识符
     * @param code_id : 代码片段的id，备用的
     */
    getCodeParamYet:function (ident, code_id) {
        var data_area = [];
        data_area.push([ "page_id" , page.page_id ]);
        data_area.push([ "ident" , ident ]);
        data_area.push([ "code_id" , code_id ]);
        var data_str = functions.requestToString(data_area);
        $.ajax({
            url:cgipath + 'pick-parmYet', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:this.handleGetCodeParamYet
        });
    },

    handleGetCodeParamYet:function (feedback) {
        //组织配置参数，并显示出来
        if (feedback.ret == '0') {
            var listData = feedback.listdata;
            var param_str = '';
            for (var i = 0; i < listData.length; i++) {        //遍历组
                var group_str = '';
                var group_list = '';

                var dependent_flag = (listData[i].group_dependent != '0');   //控制该组参数是否有效的开关，0为没有开关，非0则为有开关，开关是第一个子元素
                //有开关
                if (dependent_flag) {
                    //处理开关
                    var switcher = listData[i].group_list[0];
                    group_str += '<input type="hidden" id="pick_' + switcher.id + '" value="' + switcher.value + '" />';

                    if (switcher.value == '1' && listData[i].group_list.length > 1) {
                        //构造表单
                        group_str += '<fieldset class="select">';
                        group_str += '<legend>' + switcher.name + '</legend>';
                        //遍历其他参数
                        group_list = listData[i].group_list;
                        for (var j = 1; j < group_list.length; j++) {
                            group_str += '<div class="panel">';
                            group_str += '<span class="panel_tit">' + group_list[j].name + '：</span>';
                            group_str += '<div class="panel_main">';
                            group_str += '<input type="text" id="pick_' + group_list[j].id + '" class="inputstyle_pop" value="' + group_list[j].value + '" pick_type="' + group_list[j].pick_value_type + '" />';
                            if (group_list[j].pick_value_type == '1') {     //是颜色参数
                                group_str += '<span class="background" style="background-color:' + group_list[j].value + '"></span>';
                            }
                            group_str += '</div>';
                            group_str += '</div>';
                        }
                        group_str += '</fieldset>';
                    }
                }
                //无开关
                else {
                    //遍历所有参数
                    group_list = listData[i].group_list;
                    for (var j = 0; j < group_list.length; j++) {
                        group_str += '<div class="panel">';
                        group_str += '<span class="panel_tit">' + group_list[j].name + '：</span>';
                        group_str += '<div class="panel_main">';
                        group_str += '<input type="text" id="pick_' + group_list[j].id + '" class="inputstyle_pop" value="' + group_list[j].value + '" pick_type="' + group_list[j].pick_value_type + '" />';
                        if (group_list[j].pick_value_type == '1') {     //是颜色参数
                            group_str += '<span class="background" style="background-color:' + group_list[j].value + '"></span>';
                        }
                        group_str += '</div>';
                        group_str += '</div>';
                    }
                }

                param_str += group_str;

            }

            //把拼装好的表单显示出来
            $('#param_yet_form').empty().append(param_str);
            page.setColorParam();
            $('#qam_popup_pick_param').fadeIn();
        }
    },

    /*
     * 填完代码参数，请求返回代码
     * @param id : 代码片段的id
     * @param ident : 代码片段的唯一标识符
     * @param ohter : 配置参数集合，由参数ID和参数值组成，如&80=1&77=#238A6&75=#23A3B3
     * @param thumb_flag : 是否要生成预览图，1返回值将会带thumb字段，0不返回
     */
    getCodeView:function (code_id, ident, other, thumb_flag) {
        //显示等待
        notify.show(1, "正在处理，请稍候");

        var data_area = [];
        data_area.push([ "id" , code_id ]);
        if (ident != undefined) data_area.push([ "ident" , ident ]);
        data_area.push([ "page_id" , page.page_id ]);
        data_area.push([ "thumb_flag" , thumb_flag ]);
        for (var i = 0; i < other.length; i++) {
            data_area.push([ other[i][0] , other[i][1] ]);
        }
        var data_str = functions.requestToString(data_area);

        //定义回调函数
        var recall_function = null;
        if (thumb_flag == '1') recall_function = page.handleGetCodeView;
        else recall_function = page.handleGetCodeContent;

        $.ajax({
            url:cgipath + 'code-request', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:recall_function
        });
    },

    /*
     * 显示预览图
     */
    handleGetCodeView:function (feedback) {
        if (feedback.ret = '0') {
            //保存代码
            page.code_content = feedback.content;
            //显示布局预览图
            var preview_img = cgipath + feedback.thumb;
            $('#layout_preview').attr('src', preview_img);
            //切换显示第三个步骤
            $('#layout_step1,#layout_step2').hide();
            $('#layout_step3').show();
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }

        notify.close();
    },

    /*
     * 再次配置参数的回调，改变被配置元素的样式
     */
    handleGetCodeContent:function (feedback) {
        if (feedback.ret = '0') {
            $(page.select_element).children('style').empty().append(feedback.css);
            $('#qam_popup_pick_param').fadeOut();
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }
    },

    /*
     * 获取项目信息，用于筛选
     */
    getProjectList:function () {
        $.ajax({
            url:cgipath + 'project-showStruct', type:'POST', dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:this.handleGetProjectList
        });
    },

    handleGetProjectList:function (feedback) {
        if (feedback.ret = '0') {
            var listData = feedback.listdata;
            for (var i = 0; i < listData.length; i++) {
                //主项目
                var parent_project_id = listData[i].parent.id;
                var parent_project_name = listData[i].parent.name;
                $('#select_parent_project').append('<li><a project_id="' + parent_project_id + '">' + parent_project_name + '</a></li>');
                //对应子项目
                var child_project = listData[i].child;
                for (var j = 0; j < child_project.length; j++) {
                    var child_project_id = child_project[j].id;
                    var child_project_name = child_project[j].name;
                    $('#select_child_project').append('<li><a project_id="' + child_project_id + '" parent_id="' + parent_project_id + '">' + child_project_name + '</a></li>')
                }
            }
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
            return false;
        }
    },

    /*
     * 外链样式表管理
     */
    setCssList:function () {
        //样式列表浮层的显示与隐藏
        $('#css_list').bind('click', function () {
            if ($('#dropdown_css_list_container').css('display') == 'none') $('#dropdown_css_list_container').fadeIn();
            else $('#dropdown_css_list_container').fadeOut();
        });
        $('#custom_canvas_area').bind('click', function () {
            $('#dropdown_css_list_container').fadeOut();
        });

        //添加与删除页面所使用的外链样式
        $('#dropdown_css_list_container').bind('click', function (e) {
            var $checkbox = $(e.target);
            //检查是否点击的是checkbox
            if ($checkbox.attr('type') != 'checkbox') return false;

            //获取css路径和id
            var css_path = $checkbox.attr('css_path');
            var css_id = $checkbox.attr('css_id');

            //添加
            if ($checkbox.filter(':checked').length > 0) {
                $('#custom_canvas_area').append('<link type="text/css" href="' + css_path + '" rel="stylesheet" media="screen"/>');
                page.css_list.push(css_id);
            }
            //删除
            else {
                $('#custom_canvas_area').children('link').each(function () {
                    if ($(this).attr('href') == css_path) $(this).remove();
                });
                for (var i = 0; i < page.css_list.length; i++) {
                    if (page.css_list[i] == css_id) {
                        page.css_list.splice(i, 1);
                        break;
                    }
                }
            }
        });

        //页面私有样式
        $('#dropdown_css_list_container #private_style').bind('click', function () {
            //获取原私有样式
            $('#qam_popup_global_style #global_style_content').val($('style#global_style').html());
            //显示浮层
            $('#qam_popup_global_style').fadeIn();
            //隐藏样式管理的下拉框
            $('#dropdown_css_list_container').fadeOut();
        });
    },

    /*
     * 监听键盘事件
     */
    setKeyEvent:function () {
        $(document).bind('keydown', function (e) {
            if (!(e.target.nodeName == 'BODY' || e.target.nodeName == 'HTML')) return;                 //防止在输入文本时触发快捷键事件
            switch (e.keyCode) {
                case 17:      //ctrl键
                    page.ctrl_key = true;
                    break;
                case 18:      //alt键
                    page.alt_key = true;
                    break;
                case 16:      //shift键
                    page.shift_key = true;
                    break;
                case 46:      //delete键
                    page.deleteElement(page.select_element);
                    e.preventDefault();
                    break;
                case 38:      //ctrl+上箭头键
                    if (page.ctrl_key) {
                        page.moveElement(page.select_element, 'up');
                        e.preventDefault();
                    }
                    break;
                case 40:      //ctrl+下箭头键
                    if (page.ctrl_key) {
                        page.moveElement(page.select_element, 'down');
                        e.preventDefault();
                    }
                    break;
                case 81:      //alt+Q键：快速打开或隐藏右下角的操作面板
                    if (page.alt_key) {
                        $('.qam_action_panel .arrow').click();
                        e.preventDefault();
                    }
                    break;
                case 82:      //alt+W键：打开或关闭视觉辅助
                    if (page.alt_key) {
                        $('.qam_topfix_bar #open_auxiliary').click();
                        e.preventDefault();
                    }
                    break;
                case 86:      //ctrl+V键：快速复制
                    if (page.ctrl_key) {
                        $('.qam_action_panel #dom_copy').click();
                        e.preventDefault();
                        return false;
                    }
                    break;
                case 69:      //ctrl+E键：快速清空；alt+E键：打开或关闭审查元素；E键：打开常用样式弹框
                    if (page.ctrl_key) {
                        $('.qam_action_panel #dom_empty').click();
                        e.preventDefault();
                    }
                    else if (page.alt_key) {
                        $('.qam_bottomfix_bar #inspect_trigger').click();
                        e.preventDefault();
                    }
                    else {
                        $('.qam_action_panel #dom_effect').click();
                        e.preventDefault();
                    }
                    break;
                case 90:      //alt+Z键：撤销操作
                    if (page.alt_key) {
                        $('.qam_topfix_bar #undo').click();
                        e.preventDefault();
                    }
                    break;
                case 89:      //alt+Y键：重做操作
                    if (page.alt_key) {
                        $('.qam_topfix_bar #redo').click();
                        e.preventDefault();
                    }
                    break;
                case 80:      //alt+P键：预览操作；P键：改变占位图尺寸
                    if (page.alt_key) {
                        $('.qam_topfix_bar #preview').click();
                        e.preventDefault();
                    }
                    else {
                        $('.qam_action_panel #dom_img_size').click();
                        e.preventDefault();
                    }
                    break;
                case 83:      //alt+S键：保存操作；S键：快速打开设置样式弹框
                    if (page.alt_key) {
                        $('.qam_topfix_bar #save').click();
                        e.preventDefault();
                    }
                    else {
                        $('.qam_action_panel #dom_style').click();
                        e.preventDefault();
                    }
                    break;
                case 65:      //A键：快速打开结构弹框
                    $('.qam_action_panel #dom_structure').click();
                    e.preventDefault();
                    break;
                case 71:      //G键：快速打开独立样式弹框
                    $('#dropdown_css_list_container #private_style').click();
                    e.preventDefault();
                    break;
                case 76:      //L键：快速添加布局
                    $('.qam_topfix_bar #add_layout').click();
                    e.preventDefault();
                    break;
                case 27:      //Esc键：关闭弹框或浮层
                    $('.qam_popup').fadeOut();
                    $('#qam_key_list').hide();
                    $('#placeholder_size').hide();
                    e.preventDefault();
                    break;
                case 191:      //?键：打开键盘快捷键提示
                    if (page.shift_key) {
                        $('#qam_key_list').show();
                        e.preventDefault();
                    }
                    break;
                case 77:      //ctrl+M键：切换当前元素为绝对定位，并且可拖动和设置大小
                    if (page.ctrl_key) {
                        if ($(page.select_element).parent().css('position') != 'relative') {
                            message.show('message_div', '提示', '请先设置父元素为相对定位', 5);
                            return false;
                        }

                        if (!$(page.select_element).hasClass('qam_absolute_element')) page.changeAbsoluteMove($(page.select_element));              //设置过的不用再设置
                        e.preventDefault();
                    }
                    break;
            }
        });
        $(document).bind('keyup', function (e) {
            switch (e.keyCode) {
                case 17:         //ctrl键
                    page.ctrl_key = false;
                    break;
                case 18:      //alt键
                    page.alt_key = false;
                    break;
            }
        });
    },

    /*
     * 键盘快捷键浮层事件
     */
    setKeyListShow:function () {
        $('#qam_key_list #close').bind('click', function () {
            $('#qam_key_list').hide();
        });
        $('#qam_key_list #open_window').bind('click', function () {
            window.open('key_list.htm');
            $('#qam_key_list').hide();
        });
    },

    /*
     * 设置侧栏满高
     */
    setSideBarHeight:function () {
        var window_height = $(window).height();
        var top_height = 37;
        var qam_custom_side_nav_height = 24 + 10 + 1;
        var qam_custom_side_filter_height = 30 + 10 + 10;
        var bottom_height = 28 + 1;
        var qam_custom_side_list_height = window_height - top_height - qam_custom_side_nav_height - qam_custom_side_filter_height - bottom_height;
        $('#qam_custom_side_list').height(qam_custom_side_list_height + 'px');
    },

    /*
     * 弹框可拖动
     */
    setPopupMove:function () {
        $('.qam_popup .qam_popup_hd').bind('mousedown', function (e) {
            var $popup_win = $(this).parent().parent();
            //计算鼠标到弹框左边缘的距离
            var x1 = $popup_win.offset().left;
            var x2 = e.pageX;
            var x = x2 - x1;
            //计算鼠标到弹框上边缘的距离
            var y1 = $popup_win.offset().top - window.pageYOffset;             //页面可能有纵向滚动，所以要减去纵向滚动的距离
            var y2 = e.pageY;
            var y = y2 - y1;
            $(document).bind('mousemove', function (e) {
                $popup_win.css('left', (e.pageX - x) + 'px');
                $popup_win.css('top', (e.pageY - y) + 'px');
            });
        });
        $('.qam_popup .qam_popup_hd').bind('mouseup', function (e) {
            $(document).unbind('mousemove');
        });
    },

    /*
     * 筛选不同项目的模块和组件
     */
    setSwitchProject:function () {
        //点击模拟的select框
        $('.qam_custom_side_filter .like_select').bind('click', function () {
            if ($(this).next().css('display') == 'block') $(this).next().hide();
            else $(this).next().show();
        });
        //选择主项目，改变子项目的select框内容，并筛选列表
        $('#select_parent_project').bind('click', function (e) {
            var code_type = $('#qam_custom_side_nav li.current a').attr('code_type');
            var select_option = e.target;
            var parent_id = $(select_option).attr('project_id');
            $('#parent_project_name').html(select_option.innerHTML);
            $('#select_child_project li').removeClass('show');
            if (parent_id != '-1') {
                $('#select_child_project li a[parent_id=' + parent_id + ']').parent().addClass('show');
                //根据主项目id筛选列表
                page.getCodeList(code_type, parent_id);
            }
            else {
                page.getCodeList(code_type);
            }
            //隐藏下拉
            $('.qam_custom_side_filter .select_drop_down').hide();
            //重置子项目的select框
            $('#child_project_name').html('选择子项目');
        });
        //选择子项目，筛选列表
        $('#select_child_project').bind('click', function (e) {
            var select_option = e.target;
            var child_id = $(select_option).attr('project_id');
            $('#child_project_name').html(select_option.innerHTML);
            if (child_id != '-1') {
                //根据子项目id筛选列表
                var code_type = $('#qam_custom_side_nav li.current a').attr('code_type');
                page.getCodeList(code_type, child_id);
            }
            //隐藏下拉
            $('.qam_custom_side_filter .select_drop_down').hide();
        });
    },

    /*
     * 切换模块和组件的显示列表
     */
    setSwitchCodeType:function () {
        var normal_height = $('#qam_custom_side_list').height();          //保存边栏的初始高度

        $('#qam_custom_side_nav a').bind('click', function () {
            //切换列表
            var code_type = $(this).attr('code_type');

            page.getCodeList(code_type);
            //如果是容器，则显示切换标签容器的按钮
            var switch_tag_height = 35;
            var short_height = normal_height - switch_tag_height;
            if (code_type == '1') {
                $('#qam_custom_side_tag').show();
                //因为二级tab的原因，所以列表高度要减去二级tab的高度
                $('#qam_custom_side_list').height(short_height + 'px');
            }
            else {
                $('#qam_custom_side_tag').hide();
                //二级tab隐藏后，高度要加回来
                $('#qam_custom_side_list').height(normal_height + 'px');
            }
            //点击分类导航都重置列表为常规列表（非标签的）
            $('#qam_custom_side_filter').show();
            $('#side_list_tag').hide();
            $('#side_list').show();
            $('#qam_custom_side_tag .switch_tag_button').removeClass('current');
            $('#switch_project_container').addClass('current');
            //设置当前类别为高亮态
            $('#qam_custom_side_nav li').removeClass('current');
            $(this).parent().addClass('current');
            //显示等待
            $('#side_list').empty();
            $('.qam_custom_side_list').addClass('loading');
        });
    },

    /*
     * 切换常规容器和标签容器
     */
    setSwitchTagContainer:function () {
        //计算高度差
        var filter_height = 50;
        var switch_tag_height = 35;
        var normal_height = $('#qam_custom_side_list').height() - switch_tag_height;
        var long_height = $('#qam_custom_side_list').height() + filter_height - switch_tag_height;
        $('.qam_custom_side_tag #switch_tag_container').bind('click', function () {
            $('#side_list').hide();
            $('#side_list_tag').show();
            $('#qam_custom_side_filter').hide();
            $(this).addClass('current').prev().removeClass('current');
            //调整列表高度
            $('#qam_custom_side_list').height(long_height + 'px');
        });
        $('.qam_custom_side_tag #switch_project_container').bind('click', function () {
            $('#side_list').show();
            $('#side_list_tag').hide();
            $('#qam_custom_side_filter').show();
            $(this).addClass('current').next().removeClass('current');
            //调整列表高度
            $('#qam_custom_side_list').height(normal_height + 'px');
        });
    },

    /*
     * 显示和隐藏添加布局的浮层
     */
    setAddLayout:function () {
        $('#add_layout').bind('click', function () {
            $('#qam_popup_layout').fadeIn();
        });
        $('#qam_popup_layout .ico_x').bind('click', function () {
            $('#qam_popup_layout').fadeOut();
        });
    },

    /*
     * 绑定选择布局时，添加高亮态的事件
     */
    setSelectLayoutHover:function () {
        $('#layout_list>li>a').bind('click', function () {
            $('#layout_list>li>a').removeClass('select');
            $(this).addClass('select');
        });
    },

    /*
     * 绑定添加布局的下一步事件
     */
    setSelectLayoutNext:function () {
        $('.layout_next').bind('click', function () {
            //获取当前步骤
            var step_id = $(this).attr('step_id');

            //第一步，选择布局
            if (step_id == '1') {
                var layout_id = $('#layout_list>li>a.select').attr('layout_id');
                if (layout_id == undefined) {
                    message.show('message_div', '提示', '请选择布局', 5);
                    return false;
                }
                else {
                    //把布局id先记下来
                    page.layout_id = layout_id;
                    page.getCodeParam(layout_id);
                }
            }
            //第二步，填写配置参数
            if (step_id == '2') {
                //收集参数
                var other = [];
                $('#param_form input').each(function () {
                    var value;
                    //开关参数
                    if ($(this).attr('type') == 'checkbox') {
                        if ($(this).filter(':checked').length == 0) {
                            value = 0
                        }
                        else {
                            value = 1;
                        }
                    }
                    //普通参数
                    else {
                        value = $(this).val();
                    }

                    var pick_id = $(this).attr('id').replace('pick_', '');
                    other.push([pick_id, value]);

                });

                page.times++;
                var ident = 'wp_' + page.times;      //布局的前缀目前是wp_
                page.getCodeView(page.layout_id, ident, other, '1');
            }
            //第三步，预览效果
            if (step_id == '3') {
                //把布局加入页面
                page.insertCode($('.page_' + page.page_ident)[0], $(page.code_content), 'append');
                //$('.page_' + page.page_ident).append(page.code_content);
                //隐藏浮层
                $('#qam_popup_layout').hide();
                //偷偷地切换回第一步
                $('#layout_step3').hide();
                $('#layout_step1').show();
            }
        });
    },

    /*
     * 绑定添加布局的上一步事件
     */
    setSelectLayoutLast:function () {
        $('.layout_last').bind('click', function () {
            //获取当前步骤
            var step_id = $(this).attr('step_id');

            //回到第一步，列出布局列表
            if (step_id == '1') {
                $('#layout_step2,#layout_step3').hide();
                $('#layout_step1').show();
            }
            //回到第二步，填写配置参数
            if (step_id == '2') {
                $('#layout_step3').hide();
                $('#layout_step2').show();
            }
        });
    },

    /*
     * 对于颜色类型的参数，改变输入值时后面显示颜色
     */
    setColorParam:function () {
        $('.form_layout_cofig input[pick_type=1]').blur(function () {
            $(this).next().css('background-color', $(this).val());
        });
    },

    /*
     * 有开关控制的组参数
     */
    setSwitcherParam:function () {
        $('#param_form input[type=checkbox]').bind('click', function () {
            var checked_flag = $(this).filter(':checked').length;
            //开启
            if (checked_flag) {
                $(this).parent().parent().parent().find('input[type=text]').removeAttr('disabled');
            }
            //关闭
            else {
                $(this).parent().parent().parent().find('input[type=text]').attr('disabled', 'disabled');
            }
        });
    },


    /*
     * 模块或组件列表绑定拖拽事件以及手动添加代码事件
     */
    setDrag:function () {
        //绑定侧栏的拖放
        $('#qam_custom_side_list').bind('dragstart', //拖拽开始
            function (e) {
                //保存拖拽的元素
                page.drag_element = e.target;
                if (e.originalEvent.dataTransfer) e.originalEvent.dataTransfer.setData('drag_element', e.target);               //for firefox，不写的话firefox下无法拖拽
            }).bind('dragend',
            function (e) {           //拖拽结束
                //清空当前保存的拖拽元素
                page.drag_element = null;
                return false;
            }).bind('selectstart', function (e) {        //禁止拖拽元素被选中
                return false;
            }
        );
        /*$('#side_list div[draggable=true],#side_list_tag div[draggable=true]').each(function () {
         //禁止拖拽元素被选中
         this.onselectstart = function () {
         return false;
         };
         //拖拽开始
         this.ondragstart = function (e) {
         //保存拖拽的元素
         page.drag_element = e.target;
         e.dataTransfer.setData('drag_element', e.target);               //for firefox，不写的话firefox下无法拖拽
         };
         //拖拽结束
         this.ondragend = function (e) {
         //清空当前保存的拖拽元素
         page.drag_element = null;
         return false;
         };
         });*/

        //绑定页面中元素的再次拖放
        $('#custom_canvas_area').bind('dragstart',
            function (e) {
                //保存拖拽的元素
                page.drag_element = e.target;
                if (e.originalEvent.dataTransfer) e.originalEvent.dataTransfer.setData('drag_element', e.target);               //for firefox，不写的话firefox下无法拖拽
                $('#recycle_bin').addClass('recycle_bin_show');
            }).bind('dragend', function (e) {
                page.drag_element = null;           //清空当前保存的拖拽元素
                $('#recycle_bin').removeClass('recycle_bin_show');
            });

        //绑定手动添加代码
        $('#qam_custom_side_list').bind('click', function (e) {
            if ($(e.target).hasClass('qam_ico_append') || $(e.target).hasClass('qam_ico_insert_after')) {
                if (page.select_element != null) {
                    $code_info = $(e.target).parent().parent().parent().prev().children('#code_container');
                    page.insertCode(page.select_element, $code_info, $(e.target).attr('action'));
                }
                else {
                    message.show('message_div', '提示', '请先选中某个元素再进行操作', 5);
                }
            }
        });
        /*$('#side_list .qam_ico_append,#side_list_tag .qam_ico_append').bind('click', function () {
         if (page.select_element != null) {
         $code_info = $(this).parent().parent().parent().prev().children('#code_container');
         page.insertCode(page.select_element, $code_info, 'append');
         }
         else {
         message.show('message_div', '提示', '请先选中某个元素再进行操作', 5);
         }
         });
         $('#side_list .qam_ico_insert_after,#side_list_tag .qam_ico_insert_after').bind('click', function () {
         if (page.select_element != null) {
         $code_info = $(this).parent().parent().parent().prev().children('#code_container');
         page.insertCode(page.select_element, $code_info, 'insertAfter');
         }
         else {
         message.show('message_div', '提示', '请先选中某个元素再进行操作', 5);
         }
         });*/
    },

    /*
     * 页面区域响应拖放事件
     */
    setDrop:function () {
        $('#custom_canvas_area').bind('dragenter', function (e) {
            if ($(e.target).attr('data_container') != '1') return;        //非可放区域，不响应
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            $(e.target).addClass('drag_hover');
        });
        $('#custom_canvas_area').bind('dragleave', function (e) {
            if ($(e.target).attr('data_container') != '1') return;        //非可放区域，不响应
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            $(e.target).removeClass('drag_hover');
        });
        $('#custom_canvas_area').bind('dragover', function (e) {
            if ($(e.target).attr('data_container') != '1') return;        //非可放区域，不响应
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            e.preventDefault();
        });
        $('#custom_canvas_area').bind('drop', function (e) {
            if ($(e.target).attr('data_container') != '1') return;        //非可放区域，不响应
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            //取消显示一些东西
            $(e.target).removeClass('drag_hover');
            $('#recycle_bin').removeClass('recycle_bin_show');
            //从侧栏拖元素进来
            if ($(page.drag_element).children('#code_container').length > 0) {
                var $code_info = $(page.drag_element).children('#code_container');
                //var $code_info = $(e.dataTransfer.getData('drag_element')).children('#code_container');
                page.insertCode(e.target, $code_info, 'append');
            }
            //页面中元素的再次拖放
            else {
                page.insertCode(e.target, $(page.drag_element), 'append');
            }

            return false;
        });
    },

    /*
     * 绑定对DOM节点的操作事件
     */
    setDomActions:function () {
        //操作选项
        $('.qam_action_panel .actions').bind('click', function (e) {
            //判断是否为按钮
            if (!$(e.target).hasClass('bt_tip_hit')) return false;
            //判断是否可操作
            if ($(e.target).hasClass('disabled')) return false;
            else {
                //判断是否已经选中元素，虽然上面已有页面控制，这里再用js控制一下
                if (page.select_element == null) {
                    message.show('message_div', '提示', '当前未选中任何元素', 5);
                    return false;
                }

                //获取操作类别
                var action_type = $(e.target).attr('id');
                switch (action_type) {
                    //快速复制节点
                    case 'dom_copy':
                        $(page.select_element).clone(true).insertAfter(page.select_element);
                        //此次操作放入历史记录
                        history.addHistoryRecord();
                        break;
                    //删除节点
                    case 'dom_delete':
                        page.deleteElement(page.select_element);
                        break;
                    //清空节点
                    case 'dom_empty':
                        $(page.select_element).empty();
                        //重绘DOM树
                        page.rebuildDomTree(page.select_element);
                        //此次操作放入历史记录
                        history.addHistoryRecord();
                        break;
                    //如果是个可配置的代码块，则提供配置
                    case 'dom_pick_param':
                        //目前只有布局可以配置
                        if ($(page.select_element).attr('code_type') !== '0') {
                            message.show('message_div', '提示', '不是布局，不能配置', 5);
                            return false;
                        }
                        //获取标识符
                        var css = $(page.select_element).attr('class');
                        var ident = '';
                        //只有一个类名，该类名就是标识符
                        if (css.indexOf(' ') == '-1') {
                            ident = css;
                        }
                        //有多个类名，最后一个是标识符（绝大多情况下是有多个类名）
                        else {
                            var css_arr = css.split(' ');
                            ident = css_arr[css_arr.length - 1];
                        }
                        //获取code_id，以备用
                        var code_id = $(page.select_element).attr('code_id');
                        //请求配置参数
                        page.getCodeParamYet(ident, code_id);

                        break;
                    //微调样式
                    case 'dom_style':
                        //初始化表单
                        $('#qam_popup_inline_style input[type="text"],#qam_popup_inline_style input[type="hidden"],#qam_popup_inline_style textarea').val('');
                        $('#qam_popup_inline_style input.margin_text').removeAttr('disabled');
                        $('#qam_popup_inline_style input#margin_auto').removeAttr('checked');
                        $('#qam_popup_inline_style .color_tips').hide();
                        $('#qam_popup_inline_style .default').addClass('current');
                        $('#qam_popup_inline_style a.bg_repeat').removeClass('current');
                        $('#qam_popup_inline_style a.position').removeClass('current');
                        $('#qam_popup_inline_style #bg_img').removeClass('bg_img_no_text').css('background-image', '').children('.delete_bg_img').hide();

                        //获取class名
                        var class_name = page.select_element.className;
                        if (class_name != '') {        //类名
                            //过滤辅助类名
                            var index = class_name.indexOf('qam_auxiliary_effect');
                            if (index != -1) {
                                var auxiliary_class = class_name.substr(index, 21);             //目前辅助类名的长度为21，注意如果辅助类名长度发生变化，这里的值要相应改变
                                $('#qam_popup_inline_style input#auxiliary_class_container').val(auxiliary_class);
                                class_name = class_name.replace(auxiliary_class, '').trim().replace('  ', ' ');         //去掉辅助类名
                            }
                            //显示类名
                            $('#qam_popup_inline_style #class').val(class_name);
                        }

                        var current_css = $(page.select_element).attr('style');
                        //如果没有style，说明是从未微调过的元素，可以直接跳过
                        if (current_css == undefined) {
                            $('#qam_popup_inline_style').fadeIn();
                            return;
                        }

                        //获取内联样式
                        /*var width = page.select_element.style.width;
                         var height = page.select_element.style.height;
                         var font_size = page.select_element.style.fontSize;
                         var line_height = page.select_element.style.lineHeight;
                         var font_color = page.select_element.style.color;
                         var bg_color = page.select_element.style.backgroundColor;
                         //外边距
                         var margin_top = page.select_element.style.marginTop.replace('px', '');
                         var margin_right = page.select_element.style.marginRight.replace('px', '');
                         var margin_bottom = page.select_element.style.marginBottom.replace('px', '');
                         var margin_left = page.select_element.style.marginLeft.replace('px', '');
                         //内边距
                         var padding_top = page.select_element.style.paddingTop.replace('px', '');
                         var padding_right = page.select_element.style.paddingRight.replace('px', '');
                         var padding_bottom = page.select_element.style.paddingBottom.replace('px', '');
                         var padding_left = page.select_element.style.paddingLeft.replace('px', '');
                         //背景图片
                         var bg_img_type = $(page.select_element).attr('bg_img_type');
                         var bg_img = page.select_element.style.backgroundImage;
                         var bg_repeat = page.select_element.style.backgroundRepeat;
                         var bg_position = page.select_element.style.backgroundPosition;
                         var bg_position_x = '';
                         var bg_position_y = '';
                         if (bg_position != '') {
                         bg_position_x = bg_position.split(' ')[0];
                         bg_position_y = bg_position.split(' ')[1];
                         }*/

                        //获取微调样式(新方式)
                        var user_css = $(page.select_element).attr('user_css');
                        var user_css_arr = functions.styleToArr(user_css);

                        var width = user_css_arr.attr('width');
                        var height = user_css_arr.attr('height');
                        var left = user_css_arr.attr('left');
                        var top = user_css_arr.attr('top');
                        var font_size = user_css_arr.attr('font-size');
                        var line_height = user_css_arr.attr('line-height');
                        var font_color = user_css_arr.attr('color').replace('#', '');
                        var bg_color = user_css_arr.attr('background-color').replace('#', '');
                        //外边距
                        var margin_top = user_css_arr.attr('margin-top').replace('px', '');
                        var margin_right = user_css_arr.attr('margin-right').replace('px', '');
                        var margin_bottom = user_css_arr.attr('margin-bottom').replace('px', '');
                        var margin_left = user_css_arr.attr('margin-left').replace('px', '');
                        //内边距
                        var padding_top = user_css_arr.attr('padding-top').replace('px', '');
                        var padding_right = user_css_arr.attr('padding-right').replace('px', '');
                        var padding_bottom = user_css_arr.attr('padding-bottom').replace('px', '');
                        var padding_left = user_css_arr.attr('padding-left').replace('px', '');

                        //背景图片
                        var bg_img_type = $(page.select_element).attr('bg_img_type');
                        var bg_img = user_css_arr.attr('background-image');
                        var bg_repeat = user_css_arr.attr('background-repeat')
                        var position = user_css_arr.attr('position');
                        var bg_position = user_css_arr.attr('background-position');
                        var bg_position_x = '';
                        var bg_position_y = '';
                        if (bg_position != '') {
                            bg_position_x = bg_position.split(' ')[0];
                            bg_position_y = bg_position.split(' ')[1];
                        }

                        //直接手写的
                        var custom_css = $(page.select_element).attr('custom_css');

                        //把样式设置回表单
                        if (width != '') {         //宽度
                            //分隔数值和单位
                            var width_num = parseFloat(width);
                            var width_unit = width.replace(/\d+/, '');
                            $('#qam_popup_inline_style #width').val(width_num);
                            $('#qam_popup_inline_style #width').next().removeClass('current');
                            $('#qam_popup_inline_style #width').parent().children('a.add_unit[unit="' + width_unit + '"]').addClass('current');
                        }
                        if (height != '') {         //高度
                            //分隔数值和单位
                            var height_num = parseFloat(height);
                            var height_unit = height.replace(/\d+/, '');
                            $('#qam_popup_inline_style #height').val(height_num);
                            $('#qam_popup_inline_style #height').next().removeClass('current');
                            $('#qam_popup_inline_style #height').parent().children('a.add_unit[unit="' + height_unit + '"]').addClass('current');
                        }
                        if (left != '') {         //left
                            //分隔数值和单位
                            var left_num = parseFloat(left);
                            var left_unit = left.replace(/\d+/, '');
                            $('#qam_popup_inline_style #left').val(left_num);
                            $('#qam_popup_inline_style #left').next().removeClass('current');
                            $('#qam_popup_inline_style #left').parent().children('a.add_unit[unit="' + left_unit + '"]').addClass('current');
                        }
                        if (top != '') {         //top
                            //分隔数值和单位
                            var top_num = parseFloat(top);
                            var top_unit = top.replace(/\d+/, '');
                            $('#qam_popup_inline_style #top').val(top_num);
                            $('#qam_popup_inline_style #top').next().removeClass('current');
                            $('#qam_popup_inline_style #top').parent().children('a.add_unit[unit="' + top_unit + '"]').addClass('current');
                        }
                        if (font_size != '') {         //字体大小
                            //分隔数值和单位
                            var font_size_num = parseFloat(font_size);
                            var font_size_unit = font_size.replace(/\d+/, '');
                            $('#qam_popup_inline_style #font_size').val(font_size_num);
                            $('#qam_popup_inline_style #font_size').next().removeClass('current');
                            $('#qam_popup_inline_style #font_size').parent().children('a.add_unit[unit="' + font_size_unit + '"]').addClass('current');
                        }
                        if (line_height != '') {         //行高
                            //分隔数值和单位
                            var line_height_num = parseFloat(line_height);
                            var line_height_unit = line_height.replace(/\d+/, '');
                            $('#qam_popup_inline_style #line_height').val(line_height_num);
                            $('#qam_popup_inline_style #line_height').next().removeClass('current');
                            $('#qam_popup_inline_style #line_height').parent().children('a.add_unit[unit="' + line_height_unit + '"]').addClass('current');
                        }

                        //字体颜色
                        if (font_color != '') $('#qam_popup_inline_style #font_color').val(font_color);
                        //背景颜色
                        if (bg_color != '') $('#qam_popup_inline_style #bg_color').val(bg_color);
                        //外边距
                        if (margin_left == 'auto' && margin_right == 'auto') {      //居中
                            $('#qam_popup_inline_style #margin_auto').attr('checked', 'checked');
                            $('#qam_popup_inline_style #margin-top').val(margin_top);
                            $('#qam_popup_inline_style #margin-right').attr('disabled', 'disabled');
                            $('#qam_popup_inline_style #margin-bottom').val(margin_bottom);
                            $('#qam_popup_inline_style #margin-left').attr('disabled', 'disabled');
                        }
                        else {                      //非居中
                            $('#qam_popup_inline_style #margin-top').val(margin_top);
                            if (margin_right != 'auto') $('#qam_popup_inline_style #margin-right').val(margin_right);
                            $('#qam_popup_inline_style #margin-bottom').val(margin_bottom);
                            if (margin_left != 'auto') $('#qam_popup_inline_style #margin-left').val(margin_left);
                        }
                        //内边距
                        $('#qam_popup_inline_style #padding-top').val(padding_top);
                        $('#qam_popup_inline_style #padding-right').val(padding_right);
                        $('#qam_popup_inline_style #padding-bottom').val(padding_bottom);
                        $('#qam_popup_inline_style #padding-left').val(padding_left);

                        //背景图片
                        if (bg_img_type == '1') {
                            $('#qam_popup_inline_style #normal_img').attr('checked', 'checked');
                        }
                        else {
                            $('#qam_popup_inline_style #slice_img').attr('checked', 'checked');
                        }
                        console.log(bg_img)
                        if (bg_img != '' && bg_img != 'none') {
                            $('#qam_popup_inline_style #bg_img').addClass('bg_img_no_text').css('background-image', bg_img).children('.delete_bg_img').show();
                        }
                        else {
                            $('#qam_popup_inline_style #bg_img').removeClass('bg_img_no_text').css('background-image', '').children('.delete_bg_img').hide();
                        }
                        //背景repeat
                        if (bg_repeat != '') {
                            $('#qam_popup_inline_style a.bg_repeat[unit=' + bg_repeat + ']').addClass('current');
                        }
                        //position
                        if (position != '') {
                            $('#qam_popup_inline_style a.position[unit=' + position + ']').addClass('current');
                        }
                        //背景position
                        $('#qam_popup_inline_style #bg_position_x').val(bg_position_x);
                        $('#qam_popup_inline_style #bg_position_y').val(bg_position_y);

                        //另外书写的样式
                        $('#qam_popup_inline_style #inline_style_content').val(custom_css);
                        //显示浮层
                        $('#qam_popup_inline_style').fadeIn();
                        break;

                    //修改结构
                    case 'dom_structure':
                        //获取原结构
                        $('#qam_popup_structure #structure_content').val(page.select_element.outerHTML);
                        //显示浮层
                        $('#qam_popup_structure').fadeIn();
                        break;
                    //添加效果
                    case 'dom_effect':
                        message.show("message_div", "提示", "此功能暂未开放", 5);
                        break;
                    //修改占位图尺寸
                    case 'dom_img_size':
                        if ($(page.select_element).attr('placeholder') != '1') {
                            message.show("message_div", "提示", "您所选中的不是占位图", 5);
                            return false;
                        }
                        page.showPlaceholderDialog();
                        break;
                }
            }
        });

        //操作面板的隐藏与展现
        $('.qam_action_panel .arrow').bind('click', function () {
            if ($('.qam_action_panel').hasClass('qam_action_panel_hover')) {
                $('.qam_action_panel').removeClass('qam_action_panel_hover');
                $(this).html('&lt;');
            }
            else {
                $('.qam_action_panel').addClass('qam_action_panel_hover');
                $(this).html('&gt;');
            }
        });
    },

    /*
     * 微调样式
     */
    setInlineStyle:function () {
        //隐藏微调框
        $('#qam_popup_inline_style .ico_x,#qam_popup_inline_style .bt_tip_normal').bind('click', function () {
            $('#qam_popup_inline_style').fadeOut();
        });

        //选择单位
        $('#qam_popup_inline_style a.add_unit').bind('click', function () {
            $(this).parent().children('.add_unit').removeClass('current');
            $(this).addClass('current');
            $(this).parent().children('.unit_tips').hide();

            /*var $target_input = $(this).parent().children('input');
             var target_val = $target_input.val();
             var new_val = '';
             //position的
             if ($(this).hasClass('position_unit')) {
             if ($(this).attr('unit') == 'px') {
             if (!isNaN(parseInt(target_val))) new_val = parseInt(target_val) + $(this).attr('unit');
             }
             else {
             new_val = $(this).attr('unit');
             }
             }
             //普通的
             else {
             if (!isNaN(parseInt(target_val))) new_val = parseInt(target_val) + $(this).attr('unit');
             }

             $target_input.val(new_val);*/
        });

        //选择颜色
        $('#qam_popup_inline_style .color_input').ColorPicker({
            onSubmit:function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
                $(el).next('.color_tips').css('background-color', '#' + hex);
            },
            onBeforeShow:function () {
                $(this).ColorPickerSetColor(this.value);
            }
        })
            .bind('keyup', function () {
                $(this).ColorPickerSetColor(this.value);
            });

        //margin居中
        $('#qam_popup_inline_style .margin_auto').bind('click', function () {
            if ($(this).filter(':checked').length == 1) {
                $('#qam_popup_inline_style .margin_text').eq(1).attr('disabled', 'disabled');
                $('#qam_popup_inline_style .margin_text').eq(3).attr('disabled', 'disabled');
                $(this).attr('select', 'select');
            }
            else {
                $('#qam_popup_inline_style .margin_text').eq(1).removeAttr('disabled');
                $('#qam_popup_inline_style .margin_text').eq(3).removeAttr('disabled');
                $(this).removeAttr('select');
            }
        });

        //拖曳上传背景图
        $('#qam_popup_inline_style #bg_img').bind('dragenter', function (e) {
            $(this).addClass('bg_img_hover');
            return false;
        });
        $('#qam_popup_inline_style #bg_img').bind('dragleave', function (e) {
            $(this).removeClass('bg_img_hover');
            return false;
        });
        $('#qam_popup_inline_style #bg_img').bind('dragover', function (e) {
            return false;
        });
        $('#qam_popup_inline_style #bg_img').bind('drop', function (e) {
            $(this).removeClass('bg_img_hover');
            //读取图片文件
            var file = e.originalEvent.dataTransfer.files[0];
            page.readImgFile(file);
            return false;
        });

        //删除背景图
        $('#qam_popup_inline_style .delete_bg_img').bind('click', function () {
            //取消前台显示
            $('#qam_popup_inline_style #bg_img').css('background-image', '');
            $(this).hide();

            //删除后台记录(后台用遍历来清理不用的图片文件，所以不用这个接口了)
            /*var data_area = [];
             data_area.push([ "page_id" , page.page_id ]);
             var data_str = functions.requestToString(data_area);
             $.ajax({
             url:cgipath + 'image-delete', type:'POST', data:data_str, dataType:'json', timeout: ajax_timeout, error:function () {
             message.show('message_div', '提示', '请求失败',4);
             },
             success:function(feedback){

             }
             });*/
        });

        //提交微调样式
        $('#qam_popup_inline_style .bt_tip_hit').bind('click', function () {
            //处理原有样式
            if ($(page.select_element).attr('original_css') === undefined) {       //第一次微调
                //保存原有样式
                var reserve_css = $(page.select_element).attr('style');
                if (reserve_css == undefined) reserve_css = '';
                $(page.select_element).attr('original_css', reserve_css);
            }

            //加入用户原有样式
            var original_css = '';
            if ($(page.select_element).attr('original_css') != undefined) original_css = $(page.select_element).attr('original_css');

            //加入用户微调样式
            var user_css = '';
            //宽度
            if ($('#qam_popup_inline_style #width').val() != '') {
                if ($('#qam_popup_inline_style #width').parent().children('a.current').length == 0) {
                    $('#qam_popup_inline_style #width').parent().children('.unit_tips').show();
                    return;
                }
                user_css += 'width:' + $('#qam_popup_inline_style #width').val() + $('#qam_popup_inline_style #width').parent().children('a.current').attr('unit') + ';';
            }
            //高度
            if ($('#qam_popup_inline_style #height').val() != '') {
                if ($('#qam_popup_inline_style #height').parent().children('a.current').length == 0) {
                    $('#qam_popup_inline_style #height').parent().children('.unit_tips').show();
                    return;
                }
                user_css += 'height:' + $('#qam_popup_inline_style #height').val() + $('#qam_popup_inline_style #height').parent().children('a.current').attr('unit') + ';';
            }
            //left
            if ($('#qam_popup_inline_style #left').val() != '') {
                if ($('#qam_popup_inline_style #left').parent().children('a.current').length == 0) {
                    $('#qam_popup_inline_style #left').parent().children('.unit_tips').show();
                    return;
                }
                user_css += 'left:' + $('#qam_popup_inline_style #left').val() + $('#qam_popup_inline_style #left').parent().children('a.current').attr('unit') + ';';
            }
            //top
            if ($('#qam_popup_inline_style #top').val() != '') {
                if ($('#qam_popup_inline_style #top').parent().children('a.current').length == 0) {
                    $('#qam_popup_inline_style #top').parent().children('.unit_tips').show();
                    return;
                }
                user_css += 'top:' + $('#qam_popup_inline_style #top').val() + $('#qam_popup_inline_style #top').parent().children('a.current').attr('unit') + ';';
            }
            //行高
            if ($('#qam_popup_inline_style #line_height').val() != '') {
                if ($('#qam_popup_inline_style #line_height').parent().children('a.current').length == 0) {
                    $('#qam_popup_inline_style #line_height').parent().children('.unit_tips').show();
                    return;
                }
                user_css += 'line-height:' + $('#qam_popup_inline_style #line_height').val() + $('#qam_popup_inline_style #line_height').parent().children('a.current').attr('unit') + ';';
            }
            //字体大小
            if ($('#qam_popup_inline_style #font_size').val() != '') {
                if ($('#qam_popup_inline_style #font_size').parent().children('a.current').length == 0) {
                    $('#qam_popup_inline_style #font_size').parent().children('.unit_tips').show();
                    return;
                }
                user_css += 'font-size:' + $('#qam_popup_inline_style #font_size').val() + $('#qam_popup_inline_style #font_size').parent().children('a.current').attr('unit') + ';';
            }
            //字体颜色
            if ($('#qam_popup_inline_style #font_color').val() != '') user_css += 'color:#' + $('#qam_popup_inline_style #font_color').val() + ';';
            //背景颜色
            if ($('#qam_popup_inline_style #bg_color').val() != '') user_css += 'background-color:#' + $('#qam_popup_inline_style #bg_color').val() + ';';
            //背景repeat
            if ($('#qam_popup_inline_style a.bg_repeat.current').length > 0) user_css += 'background-repeat:' + $('#qam_popup_inline_style a.bg_repeat.current').attr('unit') + ';';
            //位置position
            if ($('#qam_popup_inline_style a.position.current').length > 0) user_css += 'position:' + $('#qam_popup_inline_style a.position.current').attr('unit') + ';';
            //背景position
            if ($('#qam_popup_inline_style #bg_position_x').val() != '' && $('#qam_popup_inline_style #bg_position_y').val() != '') user_css += 'background-position:' + $('#qam_popup_inline_style #bg_position_x').val() + ' ' + $('#qam_popup_inline_style #bg_position_y').val() + ';';
            //外边距
            if ($('#qam_popup_inline_style .margin_auto').attr('select') == undefined) {    //非居中
                $('#qam_popup_inline_style .margin_text').each(function () {
                    if ($(this).val() != '') {
                        user_css += $(this).attr('id') + ':' + $(this).val() + 'px;';
                    }
                });
            }
            else {          //水平居中
                $('#qam_popup_inline_style .margin_text:even').each(function () {
                    if ($(this).val() != '') {
                        user_css += $(this).attr('id') + ':' + $(this).val() + 'px;';
                    }
                });
                user_css += 'margin-left:auto;' + 'margin-right:auto;';
            }
            //内边距
            $('#qam_popup_inline_style .padding_text').each(function () {
                if ($(this).val() != '') {
                    user_css += $(this).attr('id') + ':' + $(this).val() + 'px;';
                }
            });

            //背景图片
            var bg_img = $('#qam_popup_inline_style #bg_img').css('background-image');
            if (bg_img != 'none' && bg_img != '') {
                user_css += 'background-image:' + bg_img + ';';
                var bg_img_type = $('#qam_popup_inline_style .sprite:checked').val();
                $(page.select_element).attr('bg_img_type', bg_img_type);
            }
            else {
                $(page.select_element).removeAttr('bg_img_type');
            }

            //保存用户微调样式
            if (user_css == '') $(page.select_element).removeAttr('user_css');
            else $(page.select_element).attr('user_css', user_css);

            //加入用户手写样式
            var custom_css = $('#inline_style_content').val();
            custom_css = custom_css.replace(/"/g, "'");                 //转义，把双引号转成单引号
            if (custom_css == '') $(page.select_element).removeAttr('custom_css');
            else $(page.select_element).attr('custom_css', custom_css);

            //写入新内联样式
            $(page.select_element).attr('style', original_css + ';' + user_css + custom_css);

            //写入新类名
            var auxiliary_class = $('#qam_popup_inline_style #auxiliary_class_container').val() == '' ? '' : ' ' + $('#qam_popup_inline_style #auxiliary_class_container').val();
            $(page.select_element).attr('class', $('#qam_popup_inline_style #class').val() + auxiliary_class);

            //隐藏微调样式浮层
            $('#qam_popup_inline_style').fadeOut();

            //重绘DOM树，调整浮层选框的位置和大小
            page.rebuildDomTree(page.select_element);

            //微调样式的操作记入历史记录
            history.addHistoryRecord();
        });

    },

    /*
     * 改变元素结构代码
     */
    setStructure:function () {
        //隐藏弹框
        $('#qam_popup_structure .ico_x,#qam_popup_structure .bt_tip_normal').bind('click', function () {
            $('#qam_popup_structure').fadeOut();
        });
        //提交新结构
        $('#qam_popup_structure .bt_tip_hit').bind('click', function () {
            //替换结构
            var $new_structure = $($('#qam_popup_structure #structure_content').val());
            $(page.select_element).replaceWith($new_structure);
            //重绘DOM树
            page.rebuildDomTree($new_structure[0]);
            //隐藏结构弹框
            $('#qam_popup_structure').fadeOut();
        });
    },

    /*
     * 改变页面的独立样式
     */
    setGlobalStyle:function () {
        //隐藏弹框
        $('#qam_popup_global_style .ico_x,#qam_popup_global_style .bt_tip_normal').bind('click', function () {
            $('#qam_popup_global_style').fadeOut();
        });
        //设置新独立样式
        $('#qam_popup_global_style .bt_tip_hit').bind('click', function () {
            //替换独立样式
            var global_style = $('#qam_popup_global_style #global_style_content').val();
            if ($('style#global_style').length > 0) {
                $('style#global_style').replaceWith('<style id="global_style">' + global_style + '</style>');            //style貌似不像普通的标签，要整个替换才可以改变里面的内容
            }
            else {
                $('.page_' + page.page_ident).append('<style id="global_style">' + global_style + '</style>')
            }
            //隐藏结构弹框
            $('#qam_popup_global_style').fadeOut();
        });
    },

    /*
     * 添加常用样式集合
     */
    setCommonEffect:function () {
        //隐藏弹框
        $('#qam_popup_effect .ico_x,#qam_popup_effect .bt_tip_normal').bind('click', function () {
            $('#qam_popup_effect').fadeOut();
        });
        //添加常用样式
        $('#qam_popup_effect .bt_tip_hit').bind('click', function () {


            $(page.select_element).addClass('');

            //隐藏结构弹框
            $('#qam_popup_effect').fadeOut();
        });
    },

    /*
     * 配置参数
     */
    setPickParam:function () {
        //隐藏浮层
        $('#qam_popup_pick_param .ico_x,#qam_popup_pick_param .bt_tip_normal').bind('click', function () {
            $('#qam_popup_pick_param').fadeOut();
        });
        //提交新的配置参数
        $('#qam_popup_pick_param .bt_tip_hit').bind('click', function () {
            //获取标识符
            var css = $(page.select_element).attr('class');
            var ident = '';
            //只有一个类名，该类名就是标识符
            if (css.indexOf(' ') == '-1') {
                ident = css;
            }
            //有多个类名，最后一个是标识符（绝大多情况下是有多个类名）
            else {
                var css_arr = css.split(' ');
                ident = css_arr[css_arr.length - 1];
            }
            //获取code_id
            var code_id = $(page.select_element).attr('code_id');
            //获取配置参数
            var other = [];
            $('#qam_popup_pick_param #param_yet_form input').each(function () {
                var value = $(this).val();
                var pick_id = $(this).attr('id').replace('pick_', '');
                other.push([pick_id, value]);
            });

            page.getCodeView(code_id, ident, other, '0');
        });
    },

    /*
     * 页面的可自由拖动元素绑定拖动事件
     */
    setAbsolutelMove:function(){
        $('#custom_canvas_area .qam_absolute_element').each(function(){
            page.changeAbsoluteMove($(this));
        });
    },

    /*
     * 更改占位图尺寸
     */
    setPlaceholderSize:function () {
        $('#placeholder_size #submit').bind('click', function () {
            //拼接路径
            var img_width = $('#placeholder_size #placeholder_w').val();
            var img_height = $('#placeholder_size #placeholder_h').val();
            var url = 'http://qam.oa.com/qam/img.php?' + img_width + 'x' + img_height;
            $(page.select_element).attr('src', url);
            //隐藏浮层
            $('#placeholder_size').hide();
        });
        $('#placeholder_size #cancel').bind('click', function () {
            //隐藏浮层
            $('#placeholder_size').hide();
        });
    },

    /*
     * 鼠标扫描审查元素
     */
    setMouseInspectElement:function () {
        $('#inspect_trigger').bind('click', function () {
            if ($(this).attr('class') == '') {
                //启动审查元素
                $(this).addClass('clicked');

                //页面区域事件绑定
                $('.page_' + page.page_ident).bind('mouseover', function (e) {
                    page.addElementCover(e.target, 1);
                });
                $('.page_' + page.page_ident).bind('click', function (e) {
                    //更新DOM tree
                    page.rebuildDomTree(e.target);
                    //关闭审查
                    page.cancelMouseInspectElement();
                    return false;
                });
            }
            else {
                page.cancelMouseInspectElement();
            }
        });
    },


    /*
     * DOM Tree审查元素
     */
    setDomInspectElement:function () {
        //DOM树区域事件绑定
        $('#dom_tree').bind('mouseover', function (e) {
            if ($(e.target).attr('tree_node') == '1') {
                var current_dom = page.dom_element[$(e.target).attr('node_id')];
                page.addElementCover(current_dom, 1);
            }
        });
        $('#dom_tree').bind('click', function (e) {
            if ($(e.target).attr('tree_node') == '1') {
                var current_dom = page.dom_element[$(e.target).attr('node_id')];
                //更新DOM tree
                page.rebuildDomTree(current_dom);
                //关闭审查
                page.cancelMouseInspectElement();
            }
        });
        $('#dom_tree').bind('mouseout', function (e) {
            if ($(e.target).attr('tree_node') == '1') {
                //隐藏浮层
                $('div#inspect_element_cover').hide();
            }
        });
        $('#dom_tree').bind('dragenter', function (e) {
            return false;
        });
        $('#dom_tree').bind('dragleave', function (e) {
            if ($(e.target).attr('tree_node') == '1') {
                if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
                $(e.target).removeClass('current');
                $('div#inspect_element_cover').hide();
            }
            return false;
        });
        $('#dom_tree').bind('dragover', function (e) {
            if ($(e.target).attr('tree_node') == '1') {
                if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
                $(e.target).addClass('current');
                var current_dom = page.dom_element[$(e.target).attr('node_id')];
                page.addElementCover(current_dom, 1);
            }
            return false;
        });
        $('#dom_tree').bind('drop', function (e) {
            if ($(e.target).attr('tree_node') == '1') {
                if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
                //取消显示一些东西
                $(e.target).removeClass('current');
                $('div#inspect_element_cover').hide();
                $('#recycle_bin').removeClass('recycle_bin_show');

                var current_dom = page.dom_element[$(e.target).attr('node_id')];
                //从侧栏拖元素进来
                if ($(page.drag_element).children('#code_container').length > 0) {
                    var $code_info = $(page.drag_element).children('#code_container');
                    page.insertCode(current_dom, $code_info, 'append');
                }
                //页面中元素的再次拖放
                else {
                    page.insertCode(current_dom, $(page.drag_element), 'append');
                }
            }
            return false;
        });
    },

    /*
     * 回收站
     */
    setRecycleBin:function () {
        $('#recycle_bin').bind('dragenter', function (e) {
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            $(this).addClass('recycle_bin_hover');
            return false;
        });
        $('#recycle_bin').bind('dragleave', function (e) {
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            $(this).removeClass('recycle_bin_hover');
            return false;
        });
        $('#recycle_bin').bind('dragover', function (e) {
            return false;
        });
        $('#recycle_bin').bind('drop', function (e) {
            if ($(page.drag_element).attr('draggable') != 'true') return;   //非可拖元素，不响应
            $(this).removeClass('recycle_bin_hover');
            $('#recycle_bin').removeClass('recycle_bin_show');
            //删除拖入的页面代码片段
            if ($(page.drag_element).attr('code_type') !== undefined) {
                page.deleteElement(page.drag_element);
            }
            //保存记录以撤销
            history.addHistoryRecord();

            return false;
        });
    },

    /*
     * 打开和关闭视觉辅助功能
     */
    setAuxiliaryEffect:function () {
        $('.topfix_op #open_auxiliary').bind('click', function () {
            if ($('link[href="css/auxiliary_effect.css"]').length > 0) {                 //关闭视觉辅助
                $('link[href="css/auxiliary_effect.css"]').remove();
                $('#inspect_element_cover2').hide();
            }
            else {                                                                       //打开视觉辅助
                $('head').append('<link type="text/css" href="css/auxiliary_effect.css" rel="stylesheet" media="screen"/>');
                //因为打开视觉辅助可能会使页面元素的位置发生变化，所以选择浮层需要重绘一下
                page.rebuildDomTree(page.select_element);
                $('#inspect_element_cover2').show();
            }
        });
    },


    /*
     * 设置预览和保存功能
     */
    setPreviewAndSave:function () {
        //预览
        $('.topfix_op #preview').bind('click', function () {
            //显示等待
            notify.show(1, "正在处理，请稍候");
            //获取页面内容
            var html = $('.page_' + page.page_ident)[0].outerHTML;
            //获取样式列表
            var css_list = page.css_list.join(',')

            var data_area = [];
            data_area.push([ "page_id" , page.page_id ]);
            data_area.push([ "html" , html]);
            data_area.push([ "css_list" , css_list]);

            var data_str = functions.requestToString(data_area);
            $.ajax({
                url:cgipath + 'page-preview', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                    message.show('message_div', '提示', '请求失败', 4);
                },
                success:function (feedback) {
                    if (feedback.ret == '0') {
                        var preview_window = window.open();
                        preview_window.location.href = feedback.preview_path;
                    }
                    else {
                        message.show('message_div', '提示', feedback.msg, 5);
                    }
                    notify.close();
                }
            });
        });

        //保存
        $('.topfix_op #save').bind('click', page.save_page);
        if (page.page_type == '') window.setInterval(page.save_page, page.save_interval_time);              //已有的普通页面，增加定时自动保存功能
    },

    /*
     * 保存页面
     */
    save_page:function () {
        //显示等待
        notify.show(1, "正在保存，请稍候");
        //获取页面内容
        var html = $('.page_' + page.page_ident)[0].outerHTML;
        //判断是否有改变
        //var temp_page_content = page.localStorage.getItem('temp_page_content');
        if (html == page.temp_page_content) {            //无变化
            window.setTimeout(function () {
                notify.close();
            }, 500)
            return;
        }                                          //有变化，请求后台保存
        else {
            //page.localStorage.setItem('temp_page_content', html);            
			page.temp_page_content=html;                                       //记录当前页面内容，用来下次比较

            //获取样式列表
            var css_list = page.css_list.join(',')

            var data_area = [];
            data_area.push([ "page_id" , page.page_id ]);
            data_area.push([ "html" , html]);
            data_area.push([ "css_list" , css_list]);
            data_area.push([ "times" , page.times]);

            var data_str = functions.requestToString(data_area);
            $.ajax({
                url:cgipath + 'page-save', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                    message.show('message_div', '提示', '请求失败', 4);
                    page.temp_page_content='';
                    notify.close();
                },
                success:function (feedback) {
                    if (feedback.ret == '0') {              //保存成功
                        //临时页面或者是由框架直接创建的页面，跳转去修改页面基本信息
                        if (page.page_type == '1' || page.page_type == '2') {
                            window.location.href = 'page.htm?type=0&action=edit&id=' + page.page_id;
                        }
                        //普通页面，提示保存成功
                        else {
                            //message.show('message_div', '提示', feedback.msg, 3);            //提示有点重，先去掉
                        }
                    }
                    else {                                 //保存失败
                        message.show('message_div', '提示', feedback.msg, 3);
                    }
                    notify.close();
                }
            });
        }
    },

    /*
     * 往页面插入代码
     * @param target : 被插入代码的目标元素
     * @param $code_info : 被插入的代码，有两种情况：1.代码标签，里面包含code_id，可根据code_id取代码数据；2.拥有完整代码内容的元素本身
     * @param method : 插入的方法，有两种：append和insertAfter
     */
    insertCode:function (target, $code_info, method) {
        var code_content = '';
        //处理代码内容
        if ($code_info.attr('id') == 'code_container') {            //侧栏加入
            if ($code_info.children().length > 0) {     //标签容器，前台单独维护
                code_content = $code_info.html();
            }
            else {                                      //常规代码块
                //拼装代码
                page.times++;
                //根据code_id取数据
                var code_id = $code_info.attr('code_id');
                var code_obj = page.code_list[code_id];
                var $html = $(code_obj.code);
                //打标记
                $html.attr('code_ident', code_obj.prefix + page.times).attr('draggable', 'true');
                code_content = $html[0].outerHTML;
            }
        }
        else {                                         //拥有完整代码内容的元素本身
            //非完整的代码片段，不能移动
            if ($code_info.attr('code_type') === undefined) return false;
            //获取代码片段
            code_content = $code_info[0].outerHTML;
            if (!page.ctrl_key) {
                //删除原位置的被拖曳元素
                $code_info.remove();
            }
        }

        //处理代码片段，对可拖放区域加入视觉辅助效果
        var $code_content = $(code_content);
        //十种可选效果，顺序产生一个
        var random_num = 0;
        //自身
        if ($code_content.attr('data_container') == '1') {
            $code_content.addClass('qam_auxiliary_effect' + random_num);
            random_num = (random_num + 1) % 10;
        }
        //子元素
        $code_content.find('*[data_container=1]').each(function () {
            //random_num = Math.floor(Math.random() * 10);    //返回0至9
            $(this).addClass('qam_auxiliary_effect' + random_num);
            random_num = (random_num + 1) % 10;
        });
        /*$code_content.find('*[data_container=1]').each(function () {
         var original_css = $(this).attr('style');
         if (original_css == undefined) original_css = '';
         var auxiliary_css = 'min-height:' + public_min_height + ';background-color:' + public_bg_color + ';system_css_flag;';
         $(this).attr('style', auxiliary_css + original_css);
         });*/

        page.code_content = $code_content[0].outerHTML;
        //把代码加入页面
        if (method == 'append') {
            $(target).append($code_content);

        }
        if (method == 'insertAfter') {
            $code_content.insertAfter($(target));
        }

        //选中加入页面的代码块，并重绘DOM树
        page.rebuildDomTree($code_content[0]);

        //如果是占位图，则显示修改其尺寸的对话框
        if ($(page.select_element).attr('placeholder') == '1') page.showPlaceholderDialog();

        //把此次操作加入历史记录
        history.addHistoryRecord();

        //禁止图片拖拽
        page.banImgDrag();
    },

    /*
     * 读取图片文件
     * @param file 图片文件对象
     */
    readImgFile:function (file) {
        //获取图片数据
        var dataReader = new FileReader();
        if (dataReader.addEventListener) { //firefox
            dataReader.addEventListener('loadend', page.uploadImage, false);
            //dataReader.addEventListener('progress', page.loadProgress, false);
        } else { //chrome / webkit
            dataReader.onloadend = page.uploadImage;
            //dataReader.onprogress = page.loadProgress;
        }
        dataReader.readAsDataURL(file);
    },
    /*
     * 读取图片完成，异步上传背景图
     */
    uploadImage:function (e) {
        var data = e.target.result;
        var data_area = [];

        data_area.push([ "page_id" , page.page_id ]);
        data_area.push([ "img_data" , data]);

        var data_str = functions.requestToString(data_area);
        $.ajax({
            url:cgipath + 'image-upload', type:'POST', data:data_str, dataType:'json', timeout:ajax_timeout, error:function () {
                message.show('message_div', '提示', '请求失败', 4);
            },
            success:page.handleUploadImage
        });
    },

    handleUploadImage:function (feedback) {
        if (feedback.ret == '0') {
            //自动设置当前元素的宽高为背景图的宽高
            $('#qam_popup_inline_style #width').val(feedback.img_info.width);
            $('#qam_popup_inline_style #height').val(feedback.img_info.height);
            //显示上传后的背景图
            $('#qam_popup_inline_style #bg_img').addClass('bg_img_no_text').css('background-image', 'url(' + cgipath + feedback.img + ')').children('.delete_bg_img').show();
        }
        else {
            message.show('message_div', '提示', feedback.msg, 5);
        }
    },

    /*
     * 取消鼠标扫描审查元素
     */
    cancelMouseInspectElement:function () {
        //页面区域事件解绑
        $('.page_' + page.page_ident).unbind('mouseover');
        $('.page_' + page.page_ident).unbind('click');
        //隐藏浮层
        $('div#inspect_element_cover').hide();
        //关闭审查按钮
        $('#inspect_trigger').removeClass('clicked');
    },


    /*
     * 增加半透明浮层
     * @param element : 对其增加半透明浮层的元素
     * @param type : 浮层类别，1为审查元素时的普通浮层，不审查时消失；2为常驻浮层，指示当前选中的元素
     */
    addElementCover:function (element, type) {
        //获取目标元素的尺寸
        //总宽
        var width = $(element).width();
        var padding_left = parseInt($(element).css('padding-left'));
        var padding_right = parseInt($(element).css('padding-right'));
        var border_left = parseInt($(element).css('border-left-width'));
        var border_right = parseInt($(element).css('border-right-width'));
        var sum_width = width + padding_left + padding_right + border_left + border_right;
        //总高
        var height = $(element).height();
        var padding_top = parseInt($(element).css('padding-top'));
        var padding_bottom = parseInt($(element).css('padding-bottom'));
        var border_top = parseInt($(element).css('border-top-width'));
        var border_bottom = parseInt($(element).css('border-bottom-width'));
        var sum_height = height + padding_top + padding_bottom + border_top + border_bottom;
        //构造一个浮层
        var cover_width = sum_width + 'px';
        var cover_height = sum_height + 'px';
        var cover_left = $(element).offset().left + 'px';
        var cover_top = $(element).offset().top + 'px';
        //收集元素的信息
        var nodeName = element.nodeName;
        //类名
        var className = '';
        var ori_className = element.className;
        ori_className = ori_className.replace(/qam_auxiliary_effect\d/, '');   //去掉辅助类名
        if (ori_className != '') {
            var className_arr = ori_className.split(' ');
            for (var i = 0; i < className_arr.length; i++) {
                if (className_arr[i] != '') {
                    className += '.' + className_arr[i];
                }
            }
        }
        var info = nodeName + className + '&nbsp;&nbsp;' + cover_width + '*' + cover_height;
        //显示半透明浮层
        if (type == 1) $('div#inspect_element_cover').show().css({'width':cover_width, 'height':cover_height, 'left':cover_left, 'top':cover_top}).appendTo('body').children('.info').html(info);
        else if (type == 2) $('div#inspect_element_cover2').show().css({'width':cover_width, 'height':cover_height, 'left':cover_left, 'top':cover_top}).appendTo('body');
    },

    /*
     * 选中传入的元素，并根据此元素重绘DOM树
     * @param element : 需要选中的元素
     */
    rebuildDomTree:function (element) {
        //传空则清空相关信息
        if (element == null) {
            page.select_element = null;    //清空当前选中的元素
            $('#inspect_element_cover2').hide();   //取消显示常驻浮层
            $('#dom_tree').empty();        //取消显示DOM树
            $('.qam_action_panel .actions a').addClass('disabled');                //取消显示操作选项
            $('.qam_action_panel #tag_name').html('未选中');                        //取消显示元素名
            return;
        }

        //选中元素
        page.select_element = element;
        //显示常驻浮层
        page.addElementCover(element, 2);
        //初始化变量
        var dom_tree_arr = [];
        var node_num = 0;
        var $currernt_dom = $(element);
        var ori_className = '';
        var className = '';
        var className_arr = [];
        page.dom_element = [];
        //父节点 开始
        while ($currernt_dom.parent('#custom_canvas_area').length == 0) {
            $currernt_dom = $currernt_dom.parent();
            //处理类名
            ori_className = $currernt_dom[0].className;
            ori_className = ori_className.replace(/qam_auxiliary_effect\d/, '');   //去掉辅助类名
            if (ori_className == '') {
                className = ori_className;
            }
            else {
                className_arr = ori_className.split(' ');
                className = '';
                for (var i = 0; i < className_arr.length; i++) {
                    if (className_arr[i] != '') {
                        className += '.' + className_arr[i];
                    }
                }
            }

            page.dom_element[node_num] = $currernt_dom[0];
            dom_tree_arr.unshift('<a tree_node="1" node_id="' + node_num + '">' + $currernt_dom[0].nodeName + className + '</a>');
            node_num++;
        }
        //父节点 结束

        //自身 开始
        //处理类名
        ori_className = element.className;
        ori_className = ori_className.replace(/qam_auxiliary_effect\d/, '');   //去掉辅助类名
        if (ori_className == '') {
            className = ori_className;
        }
        else {
            className_arr = ori_className.split(' ');
            className = '';
            for (var i = 0; i < className_arr.length; i++) {
                if (className_arr[i] != '') {
                    className += '.' + className_arr[i];
                }
            }
        }
        page.dom_element[node_num] = element;
        dom_tree_arr.push('<a tree_node="1" node_id="' + node_num + '" class="current">' + element.nodeName + className + '</a>');
        node_num++;

        //更新操作面板的信息
        $('.qam_action_panel .actions a').removeClass('disabled');                //显示操作选项
        $('.qam_action_panel #tag_name').html(element.nodeName + className);      //显示名称
        var code_type = $(element).attr('code_type');                             //获取元素的类别
        if (code_type !== '0') {                                                  //非可配置的元素(目前只有布局可配置)
            $('#dom_pick_param').addClass('disabled');
        }
        var is_placeholder = $(element).attr('placeholder');                        //如果是占位图，才提供修改尺寸的入口
        if (is_placeholder != '1') {
            $('#dom_img_size').addClass('disabled');
        }

        //自身 结束

        //子节点 开始
        if ($(element).children().length > 0) {
            var child_dom_tree_str = '';
            $(element).children().each(function () {
                if (this.tagName == 'style' || this.tagName == 'STYLE') return;
                //处理类名
                ori_className = this.className;
                ori_className = ori_className.replace(/qam_auxiliary_effect\d/, '');   //去掉辅助类名
                if (ori_className == '') {
                    className = ori_className;
                }
                else {
                    className_arr = ori_className.split(' ');
                    className = '';
                    for (var i = 0; i < className_arr.length; i++) {
                        if (className_arr[i] != '') {
                            className += '.' + className_arr[i];
                        }
                    }
                }

                page.dom_element[node_num] = this;
                //dom_tree_arr[dom_tree_arr.length] = '<a tree_node="1" node_id="' + node_num + '">' + this.nodeName + className + '</a>';
                child_dom_tree_str += '【<a tree_node="1" node_id="' + node_num + '">' + this.nodeName + className + '</a>】';
                node_num++;
            });
            dom_tree_arr.push(child_dom_tree_str);
        }
        //子节点 结束

        //组合成字符串
        var dom_tree_str = dom_tree_arr.join(' &gt; ');
        $('#dom_tree').empty().append(dom_tree_str);
    },

    /*
     * 删除元素
     * @param element : 需要删除的元素对象
     */
    deleteElement:function (element) {
        if (element == undefined) {
            message.show('message_div', '提示', '没有选中元素', 5);
            return false;
        }
        //先看一下目标元素有没有下一个兄弟节点，有的话取这个，没有的话取父节点
        var $new_select_dom = null;
        if ($(element).next().length == 0 || $(element).next()[0].nodeName == 'STYLE') {
            $new_select_dom = $(element).parent();
        }
        else {
            $new_select_dom = $(element).next();
        }
        //删除当前选中的节点
        $(element).remove();
        //重绘DOM树
        page.rebuildDomTree($new_select_dom[0]);
        //此次操作放入历史记录
        history.addHistoryRecord();
    },

    /*
     * 同级移动元素
     * @param element : 需要移动的元素对象
     * @param direction : 移动的方向
     */
    moveElement:function (element, direction) {
        if (direction == 'up') {
            //检测是否有上一个兄弟节点
            if ($(element).prev().length == 0 || $(element).prev()[0].nodeName == 'STYLE') {
                return false;
            }
            else {             //跟上一个兄弟节点对调
                $(element).insertBefore($(element).prev());
                page.rebuildDomTree(element);

                //此次操作放入历史记录
                history.addHistoryRecord();
            }
        }
        else if (direction == 'down') {
            //检测是否有下一个兄弟节点
            if ($(element).next().length == 0 || $(element).next()[0].nodeName == 'STYLE') {
                return false;
            }
            else {              //跟下一个兄弟节点对调
                $(element).insertAfter($(element).next());
                page.rebuildDomTree(element);

                //此次操作放入历史记录
                history.addHistoryRecord();
            }
        }
    },

    /*
     * 切换绝对定位（可拖动）和普通定位
     * @param element : 需要切换的元素
     */
    changeAbsoluteMove:function ($element) {
        $('#inspect_element_cover2').hide();           //隐藏选中浮层


        /*if ($element.hasClass('qam_absolute_element')) {             //切换为普通定位
         $element.removeClass('qam_absolute_element').children('.qam_change_size').remove();
         $element.unbind('mousedown').unbind('mouseup');
         $element.children('.qam_change_size').unbind('mousedown').unbind('mouseup');
         }*/


        //切换为绝对定位（可拖动）

        if ($element.css('width') == '0px' || $element.css('height') == '0px') {                                //如果原来没有宽高，则设置默认宽高，方便拖动
            $element.css({'width':'100px', 'height':'30px'});
            var user_css_arr = functions.styleToArr($element.attr('user_css'));
            user_css_arr.attr('width', '100px')
            user_css_arr.attr('height', '30px')
            var user_css = functions.arrToStyle(user_css_arr);
            $element.attr('user_css', user_css);
        }

        //改变样式
        $element.css({'position':'absolute'}).addClass('qam_absolute_element');
        if($element.children('.qam_change_size').length==0) $element.append('<i class="qam_change_size"></i>');
        //记录到微调属性中
        var user_css_arr = functions.styleToArr($element.attr('user_css'));
        user_css_arr.attr('position', 'absolute')
        var user_css = functions.arrToStyle(user_css_arr);
        $element.attr('user_css', user_css);


        //取消拖拽效果
        $element.bind('dragstart', function (e) {
            e.stopPropagation();
            return false;
        });

        //拖动改变位置
        $element.bind('mousedown', function (e) {
            //计算鼠标到目标元素左边缘的距离
            var x1 = $(this).offset().left;
            var x2 = e.pageX;
            var x = x2 - x1;
            //计算目标元素的父元素到页面左边缘的距离
            var parent_x = $element.parent().offset().left;

            //计算鼠标到目标元素上边缘的距离
            var y1 = $(this).offset().top;
            var y2 = e.pageY;
            var y = y2 - y1;
            //计算目标元素的父元素到页面上边缘的距离
            var parent_y = $element.parent().offset().top;

            $(document).bind('mousemove', function (e) {
                var left_val = (e.pageX - x - parent_x) + 'px';
                var top_val = (e.pageY - y - parent_y) + 'px';
                //改变实际样式
                $element.css('left', left_val);
                $element.css('top', top_val);
                //记录到微调属性中
                var user_css_arr = functions.styleToArr($element.attr('user_css'));
                user_css_arr.attr('left', left_val)
                user_css_arr.attr('top', top_val)
                var user_css = functions.arrToStyle(user_css_arr);
                $element.attr('user_css', user_css);
            });
        });
        $element.bind('mouseup', function (e) {
            $(document).unbind('mousemove');
        });

        //改变元素大小
        $size_trigger = $element.children('.qam_change_size');
        $size_trigger.bind('mousedown', function (e) {
            //计算鼠标到trigger右边缘的距离
            var x1 = $(this).offset().left;
            var x2 = e.pageX;
            var x = $(this).width() - (x2 - x1);
            //计算目标元素到trigger下边缘的距离
            var element_x = $element.offset().left;

            //计算鼠标到目标元素上边缘的距离
            var y1 = $(this).offset().top;
            var y2 = e.pageY;
            var y = $(this).height() - (y2 - y1);
            //计算目标元素到页面上边缘的距离
            var element_y = $element.offset().top;

            $(document).bind('mousemove', function (e) {
                var width_val = (e.pageX - element_x + x) + 'px';
                var height_val = (e.pageY - element_y + y) + 'px';
                //改变实际样式
                $element.css('width', width_val);
                $element.css('height', height_val);
                //记录到微调属性中
                var user_css_arr = functions.styleToArr($element.attr('user_css'));
                user_css_arr.attr('width', width_val)
                user_css_arr.attr('height', height_val)
                var user_css = functions.arrToStyle(user_css_arr);
                $element.attr('user_css', user_css);
            });

            //阻止冒泡
            e.stopPropagation();
        });
        $size_trigger.bind('mouseup', function (e) {
            $(document).unbind('mousemove');
            //阻止冒泡
            e.stopPropagation();
        });

    },

    /*
     * 显示修改占位图尺寸的对话框
     */
    showPlaceholderDialog:function () {
        //获取当前占位图大小
        var img_url = $(page.select_element).attr('src');
        var img_size = img_url.split('?')[1];

        var img_width = img_size.split('x')[0];
        var img_height = img_size.split('x')[1];

        //显示修改框
        var left = $(page.select_element).offset().left - 50;
        var top = $(page.select_element).offset().top + 30;
        $('#placeholder_size #placeholder_w').val(img_width);
        $('#placeholder_size #placeholder_h').val(img_height);
        $('#placeholder_size').css('left', left + 'px').css('top', top + 'px').show();
    },

    /*
     * 禁止页面编辑区域中的图片拖拽的默认行为，以防与代码块的拖拽行为混淆
     */
    banImgDrag:function () {
        $('#custom_canvas_area img').bind('dragstart', function (e) {
            return false;
        });
    }
};

/* 历史记录的相关操作 */
var history = {

    storage:window.sessionStorage, //本地存储
    history_undo_key:0, //历史记录undo键值
    history_redo_key:0, //历史记录redo键值

    /*
     * 初始化
     */
    init:function () {
        this.storage.clear();
        this.setUndoAction();
        this.setRedoAction();
    },

    /*
     * 把当前页面状态加入历史记录，用来提供撤销和重做
     */
    addHistoryRecord:function () {
        var page_record = $('.page_' + page.page_ident).html();
        history.history_undo_key++;
        history.storage.setItem('undo' + history.history_undo_key, page_record);
    },

    /*
     * 定义撤销操作
     */
    setUndoAction:function () {
        $('.topfix_op #undo').bind('click', function () {
            if (history.history_undo_key > 1) {
                //把undo堆栈的顶部记录拿出来
                var current_record = history.storage.getItem('undo' + history.history_undo_key);
                history.storage.removeItem('undo' + history.history_undo_key);
                history.history_undo_key--;
                //放到redo堆栈
                history.history_redo_key++;
                history.storage.setItem('redo' + history.history_redo_key, current_record);
                //撤销操作
                var last_record = history.storage.getItem('undo' + history.history_undo_key);
                $('.page_' + page.page_ident).html(last_record);
                //取消显示相关信息
                page.rebuildDomTree(null);
            }
            else {
                message.show('message_div', '提示', '已经没有可撤销的操作了，亲', 5);
            }
        });
    },

    /*
     * 定义重做操作
     */
    setRedoAction:function () {
        $('.topfix_op #redo').bind('click', function () {
            if (history.history_redo_key > 0) {
                //把redo堆栈的顶部记录拿出来
                var next_record = history.storage.getItem('redo' + history.history_redo_key);
                history.storage.removeItem('redo' + history.history_redo_key);
                history.history_redo_key--;
                //放到undo堆栈
                history.history_undo_key++;
                history.storage.setItem('undo' + history.history_undo_key, next_record);
                //重做操作
                $('.page_' + page.page_ident).html(next_record);
                //取消显示相关信息
                page.rebuildDomTree(null);
            }
            else {
                message.show('message_div', '提示', '您还没进行新的操作呢，亲', 5);
            }
        });
    }
}